<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>添加用户</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" href="__ADMIN_STATIC__/css/oksub.css">
	<script type="text/javascript" src="__STATIC__/lib/loading/okLoading.js"></script>
</head>
<body>
<div class="ok-body">
	<!--form表单-->
	<form class="layui-form layui-form-pane ok-form">
		<!--用户名-->
		<div class="layui-form-item">
			<label class="layui-form-label">用户名</label>
			<div class="layui-input-block">
				<input type="text" name="username" placeholder="请输入用户名" autocomplete="off" class="layui-input"
				       lay-verify="required">
			</div>
		</div>
		<!--邮箱-->
		<div class="layui-form-item">
			<label class="layui-form-label">邮箱</label>
			<div class="layui-input-block">
				<input type="text" name="email" placeholder="请输入邮箱" autocomplete="off" class="layui-input"
				       lay-verify="required|email">
			</div>
		</div>
		<!--密码-->
		<div class="layui-form-item">
			<label class="layui-form-label">密码</label>
			<div class="layui-input-block">
				<input type="password" name="password" placeholder="请输入密码" autocomplete="off" class="layui-input"
				       lay-verify="required">
			</div>
		</div>
		<!--重复密码-->
		<div class="layui-form-item">
			<label class="layui-form-label">重复密码</label>
			<div class="layui-input-block">
				<input type="password" name="re_password" placeholder="请再次输入密码" autocomplete="off" class="layui-input"
				       lay-verify="required">
			</div>
		</div>
		<!--手机号-->
		<div class="layui-form-item">
			<label class="layui-form-label">手机号</label>
			<div class="layui-input-block">
				<input type="text" name="mobile" placeholder="请次输入手机号" autocomplete="off" class="layui-input">
			</div>
		</div>
		<!--昵称-->
		<div class="layui-form-item">
			<label class="layui-form-label">昵称</label>
			<div class="layui-input-block">
				<input type="text" name="nickname" placeholder="请次输入昵称" autocomplete="off" class="layui-input">
			</div>
		</div>
		<!--头像-->
		<div class="layui-form-item">
			<label  class="layui-form-label">头像</label>
			<div class="layui-input-block">
				<div class="layui-upload" style="display: flex;">
					<button type="button" class="layui-btn" id="up_btn">上传头像</button>
					<input readonly id="image_input" class="layui-input" placeholder="头像" autocomplete="off" name="avatar">
				</div>
				<div class="layui-upload-list">
					<img src="__ADMIN_STATIC__/images/noimg.gif" width="145" height="145" class="layui-upload-img" id="avatar_img">
					<p id="avatar_msg"></p>
				</div>
			</div>
		</div>



		<div class="layui-form-item">
			<div class="layui-input-block">
				<button class="layui-btn" lay-submit lay-filter="addArticle">立即提交</button>
				<button type="reset" class="layui-btn layui-btn-primary">重置</button>
			</div>
		</div>
	</form>
</div>
<!--js逻辑-->
<script src="__STATIC__/lib/layui/layui.js"></script>
<script>
	layui.use(["form", "okUtils", "okLayer", 'upload'], function () {
		let form = layui.form;
		let okUtils = layui.okUtils;
		let okLayer = layui.okLayer;
		let $ = layui.jquery;
		let upload = layui.upload;

		okLoading.close();
		form.on("submit(addArticle)", function (data) {
			okUtils.ajax("{:url('user/save')}", "post", data.field, true).done(function (response) {
				okLayer.greenTickMsg(response.msg, function () {
					parent.layer.close(parent.layer.getFrameIndex(window.name));
				});
			}).fail(function (error) {
				console.log(error)
			});
			return false;
		});
		//图片上传
		var uploadInst = upload.render({
			elem: '#up_btn'
			, url: "{:url('user/uploadAvatar')}"
			, field: 'avatar'
			, before: function (obj) {
				//预读本地文件示例，不支持ie8
				obj.preview(function (index, file, result) {
					$('#avatar_img').attr('src', result); //图片链接（base64）
				});
			}
			, done: function (res) {
				//如果上传失败
				if (res.code > 0) {
					return layer.msg('上传失败');
				}
				//上传成功
				$('#image_input').val(res.data['src']);
			}
			, error: function () {
				//演示失败状态，并实现重传
				var demoText = $('#avatar_msg');
				demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
				demoText.find('.demo-reload').on('click', function () {
					uploadInst.upload();
				});
			}
		});
	});
</script>
</body>
</html>
